<template>
  <div>
    <div id="flowChart" style="height: 600px;width: 1000px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {findByWeek, findWeatherByDay} from "../../../http/request";
export default {
  name: "singleWeekEverydayPassenger",
  data() {
    return {
      week: [],
      num: [],
      max_tpt: [],
      min_tpt: [],
      weather_type: []
    }
  },
  mounted () {
    //this.flowChart();
    findByWeek().then(res => {
      for(let r in res.data) {
        console.log(String(res.data[r]))
        this.week.push(String(res.data[r].week))
        this.num.push(res.data[r].num)
      }
      console.log(this.week);
      console.log(this.num);
      this.flowChart()
    });
    for(let i = 1; i<8; i++){
      findWeatherByDay('06',('0'+i)).then(res => {
          this.max_tpt.push(parseInt(res.data.max_tpt.replace('℃','').trim()))
          this.min_tpt.push(parseInt(res.data.min_tpt.replace('℃','').trim()))
          this.weather_type.push(res.data[r].weather_type)
      });
    }
    console.log(this.max_tpt)
    console.log(this.min_tpt)
    this.flowChart()
  },
  methods: {
    flowChart(){
      let flowChart = echarts.init(document.getElementById('flowChart'));
      flowChart.setOption({
        color: [ '#91c7ae','#0026ff', '#ff0000'],
        title: {
          text: '单周每天的客流量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['客流人数','最低气温','最高气温']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          position: 'bottom',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: [
          {
            name: '人数',
            type: 'value',
            axisLabel: {
              formatter: '{value} 人'
            }
          },
          {
            name: '温度',
            // nameLocation: 'start',
            type: 'value',
            max: Math.min(...this.min_tpt)-2,
            min: Math.max(...this.max_tpt)+2,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: '客流人数',
            type: 'bar',
            data: this.num,
            yAxisIndex: 0
          },
          {
            name: '最低气温',
            data: this.min_tpt,
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            markPoint: {
              data: [
                {type: 'min', name: '最小值'}
              ]
            },
          },
          // 最高气温
          {
            name: '最高气温',
            data: this.max_tpt,
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'}
              ]
            },
          }
        ]
      })
    }
  },

}


</script>

<style scoped>

</style>
